<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>10_过渡&动画2</title>
    <style>
      .v-enter-active {
        animation: move linear 5s;
      }
      .v-leave-active {
        animation: move linear 5s;
      }

      @keyframes move {
        0% {
          transform: translateX(0);
        }
        20% {
          transform: translateX(100px);
        }
        50% {
          transform: translateX(0);
        }
        80% {
          transform: translateX(100px);
        }
        100% {
          transform: translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button @click="isShow = !isShow">按钮</button>
      <!-- 作用：会给显示隐藏的元素添加指定类名 -->
      <transition>
        <p v-show="isShow">尚硅谷</p>
      </transition>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          isShow: true,
        },
      });
    </script>
  </body>
</html>
